<template>
	<view>
		<view class="cu-bar search bg-white b-radius">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" placeholder="请输入关键词" @tap="toSearch()"
					disabled="true"></input>
			</view>
			<view class="text-green" @tap="toSelectArea()">
				{{caName}}<text class="cuIcon-refresharrow"></text>
			</view>
		</view>
		<view class="padding-lr-sm">
			<vc-category :category-list="categoryList"></vc-category>
			<vc-ads ref="vcAdsRef"></vc-ads>
		</view>
		<view class="margin-top">
			<scroll-view scroll-x class="bg-white nav " scroll-with-animation>
				<view class="cu-item" :class="'-1'== curTypeCd?'text-green cur':''" @tap="selectActiviti1()">
					政务宣传
				</view>
				<view class="cu-item" :class="item.typeCd==curTypeCd?'text-green cur':''"
					v-for="(item,index) in activitiTitle" :key="index" @tap="selectActiviti(item)" :data-id="index">
					{{item.typeName}}
				</view>
			</scroll-view>
		</view>
		<view class="noticesList bg-white margin-top-1">
			<block v-for="(item,index) in notices" :key="index" wx:key="index">
				<view class="noticesList-list" @tap="_goDetail(item)">
					<view class="notices-info">
						<view class="notices-info-name">{{item.title}}</view>
						<view class="notice-bottom">
							<view>
								<text class="lg text-gray cuIcon-time"></text>
								<text class="notice-startTime margin-left-xs">{{item.startTime}}</text>
							</view>
						</view>
					</view>
					<view class="notices-info-image">
						<image :src="item.headerImg" />
					</view>
				</view>
			</block>
		</view>
		<vc-bottom-black></vc-bottom-black>
	</view>
</template>
<script>
	import fixedSearch from '../../components/fixed-search/fixed-search.vue';

	import vcCategory from '@/components/vc-category/vc-category.vue'

	import vcAds from '@/components/vc-ads/vc-ads.vue'

	import vcBottomBlack from '@/components/vc-bottom-black/vc-bottom-black.vue';
	import {queryGovCiviladmin} from '../../api/civiladmin/civiladminApi.js'
	
	import param from '../../constant/param.js'
	import {
		isNull,isEmpty
	} from '../../lib/java110/utils/StringUtil.js'

	import {
		getAreaId,getAreas
	} from '../../api/area/areaApi.js'
	import {
		getIndexCategoryList,
		getActivitiTitle,
		getCategoryList,
		loadActivites,
	} from '../../api/index/indexApi.js'

	import {
		sliceArray
	} from '../../lib/java110/utils/ArrayUtil.js'
	export default {
		data() {
			return {
				categoryList: [],
				activitiTitle: [],
				notices: [],
				curTypeCd: '-1',
				page: 1,
				row: 7,
				caId: '',
				caName: '',
				addlistdata: [{
					title: "我的发布",
					src: "/static/images/market_my.png"
				}]
			}
		},
		components: {
			vcCategory,
			vcAds,
			vcBottomBlack
		},
		onLoad(options) {
			this.vc.setStorageSync('govIndexRefresh','1');
			this.vc.onLoad(options);
			this.caId = options.caId;
			if (isNull(this.caId)){//没有则默认
				this.caId = getAreaId();
			}
			this.categoryList = this._getCategoryList();
			this._initIndexData();
			let area = uni.getStorageSync("_selectArea");
			if(isEmpty(area)){
				this._loadAreas();
			}else{
				this.caName = area.caName;
			}
		},
		onShow: function(options) {
			let _govIndexRefresh = this.vc.getStorageSync('govIndexRefresh');
			if(_govIndexRefresh != '1'){
				this.$refs.vcAdsRef._loadAdvertPhoto();
				this._initIndexData();
				this.notices = [];
				return;
			}
			//this.vc.setStorageSync('govIndexRefresh','0');
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.notices.length >= this.page * this.row) {
				this.page = this.page + 1;
				this._loadActivites();
			}
		},
		methods: {
			_loadAreas(){
				let that = this;
				let _objData = {
					page: 1,
					row: 20
				};
				getAreas(_objData).then(_data =>{
					let _area = _data.data;
					_area.forEach(function(_item) {
						if(that.caId == _item.caId){
							uni.setStorageSync("_selectArea",_item);
						}
					});
					uni.setStorageSync("_allAreas",_area);
				})
			},
			_initIndexData: function() {
				let _that = this;
				_that._loadActivitiesType();
			},
			_getCategoryList() {
				let _that = this
				getIndexCategoryList()
					.then(function(result) {
						let categoryData = result
						_that.categoryList = sliceArray(categoryData, 8)
					})
			},
			addlisttap: function(index) {
				/*第一个序列为0,第二个为1,以此类推;当值为-1代表点击的是遮慕层*/
				this.vc.loginAuth();
				let _that = this;
				if (index == 0) {
					this.vc.navigateTo({
						url: '/pages/myOrder/myOrder'
					}, true);
					return;
				}
			},
			//搜索跳转
			toSearch(e) {
				this.vc.navigateTo({
					url: `/pages/goods/HM-search?searchType=3`
				}, true)
			},
			//切换小区
			toSelectArea(e) {
				this.vc.navigateTo({
					url: `/pages/viewAreas/viewAreas`
				}, true)
			},
			_loadActivitiesType: function() {
				let _that = this;
				let _objData = {
					page: 1,
					row: 20,
					defaultShow: 'Y',
					caId: getAreaId()
				};
				//查询 活动标题
				getActivitiTitle(_objData)
					.then((actType) => {
						_that.activitiTitle = actType;
					})
					.then((acts) => {
						
						_that._loadActivites();
					})
			},
			_loadActivites: function() {
				let _that = this;
				if (this.curTypeCd == '') {
					return;
				}
				if (this.curTypeCd == '-1') {
					let _objData = {
						page: this.page,
						row: this.row,
						caId: getAreaId(),
					};
					//加载政务通知
					queryGovCiviladmin(_objData)
						.then(function(_acts) {
							_that.notices = _that.notices.concat(_acts.data);
					});
				}else{
					let _objData = {
						page: this.page,
						row: this.row,
						typeCd: this.curTypeCd,
						caId: getAreaId(),
						defaultShow: 'Y',
						clientType: 'H5'
					};
					//加载活动
					loadActivites(_objData)
						.then(function(_acts) {
							_that.notices = _that.notices.concat(_acts);
						});
				}
			},
			_loadNotices: function(){
				let _that = this;
				if (this.curTypeCd == '') {
					return;
				}
			},
			gotoDetail: function(_notice) {
				let that = this;
				this.vc.navigateTo({
					url: "/pages/notice/detail/detail?civiladminId=" + _notice.civiladminId +"&caId="+that.caId
				});
			},
			selectActiviti: function(_item) {
				this.curTypeCd = _item.typeCd;
				this.notices = [];
				this.page = 1;
				this._loadActivites();
			},
			selectActiviti1: function() {
				this.curTypeCd = "-1";
				this.notices = [];
				this.page = 1;
				this._loadActivites();
			},
			_goDetail: function(_item){
				if(this.curTypeCd == "-1"){
					this.vc.navigateTo({
						url: "/pages/notice/detail/detail?civiladminId=" + _item.civiladminId +"&caId="+this.caId
					});
				}else{
					this.vc.navigateTo({
						url: '/pages/activitesDetail/activitesDetail?activitiesId=' + _item.activitiesId + '&title=' + _item.title +
							'&caId=' + this.caId
					});
				}
			},
			_toDetail: function(_item) {
				this.vc.navigateTo({
					url: '/pages/activitesDetail/activitesDetail?activitiesId=' + _item.activitiesId + '&title=' + _item.title +
						'&caId=' + _item.caId
				});
			},
		}
	}
</script>

<style>
.noticesList-list{
  font-size: 25rpx;
  display: flex;
  width: 100%;
  padding: 10rpx 0;   
  border-bottom: 1rpx solid #ECECEC;
  color: #6D6D6D;
  justify-content: space-between;
}
.notices-info-name{
  margin-top: 10rpx;
  color: black;
  font-size: 30rpx;
  display: -webkit-box;  /*设置为弹性盒子*/
  -webkit-line-clamp: 2;  /*最多显示5行*/
  overflow: hidden;  /*超出隐藏*/
  text-overflow: ellipsis;  /*超出显示为省略号*/
  -webkit-box-orient: vertical;
  word-break: break-all;  /*强制英文单词自动换行*/
}
.notices-info-image image{
  width: 200rpx;
  height: 150rpx;
  margin: 10rpx 20rpx 0rpx 20rpx;
  border-radius: 10rpx;
}
.notices-info{
  margin: 10rpx 0rpx 0rpx 20rpx;
  height: 150rpx;
  flex-direction: column;
  display: flex;
  justify-content: space-between;
}
.notice-bottom{
  display: flex;
  text-align: left;
}
.notice-bottom view{
  margin-right: 20rpx;
}

.notice-bottom icon{
  color: #8a8a8a;
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
}
.notice-bottom view text{
  font-size: 25rpx;
  line-height: 40rpx;
}
.mask{
  width:100%;
  height:100%;
  position: fixed;
  z-index:999;
  background-color:rgba(15, 15, 26, 0.7);
}

.ad-swiper{
  width: 100%;
  height: 240upx;
  border-bottom:20rpx solid #f4f4f4; 
}

.ad-swiper image{
  width: 100%;
  height: inherit;
}
.text-green {
	color: #39b54a;
}
</style>
